<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<div class="main">
    <div class="container head">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="stuName" autocomplete="off" placeholder="请输入学生姓名" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="clazzName" autocomplete="off" placeholder="请输入班级" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="subjectName" autocomplete="off" placeholder="请输入专业名" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="stuCode" autocomplete="off" placeholder="请输入学号" class="layui-input">
                </div>
                <div class="layui-form-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                </div>
            </div>
        </form>
        <div class="layui-form-item">
            <div class="layui-form-inline">
                <button class="layui-btn layui-btn-warm" type="button" id="downLoadBtn">下载模板</button>
                <button class="layui-btn layui-btn-normal" type="button" id="impBtn">Excel导入</button>
                <button class="layui-btn" type="button" id="addBtn">手动添加</button>
            </div>
        </div>
    </div>
    <hr class="layui-bg-green">
    <div class="container content">
        <table class="layui-hide" id="sysUser" lay-filter="sysUser"></table>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="query">查看</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="resetPwd">重置密码</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">删除</button>
    </div>
</script>

<script type="text/html" id="dialogHtml">
    <div id="dialog">
        <form action="" class="layui-form" lay-filter="dialog-form">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="请输入新密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password2" lay-verify="required" autocomplete="off" placeholder="请再次输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="dialogBtn" id="dialogBtn">提交</button>
                </div>
            </div>
        </form>
    </div>
</script>

<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['element', 'layer', 'form', 'table','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            table = layui.table;

        var flag = 'add';
        // 保存在页面上点击的树型列表中的专业

        initTable()

        $('#addBtn').click(function () {
            var a = '<a target="ifm" href="/ssms/sysUser/info?action=add"></a>'
            $(a)[0].click()
        })

        $('#downLoadBtn').click(function () {
            window.location.href = '/ssms/sys/download/stuTemplet'
        })

        // 搜索提交
        form.on('submit(searchBtn)', function (data) {
            search(data.field) // data.field是一个js对象
            return false;
        })

        // dialog提交按钮
        form.on('submit(dialogBtn)', function (data) {
            var formData = data.field;
            console.log(formData)
            resetPwd(formData)
            return false;
        })


        //监听工具条
        table.on('tool(sysUser)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            console.log(data)
            console.log(layEvent)
            if (layEvent === 'remove') { //删除
                layer.confirm('真的删除？', function (index) {
                    remove(data);
                });
            }else if (layEvent === 'query') { //编辑
                var a = '<a target="ifm" href="/ssms/sysUser/info?action=update&stuId='+data.id+'"></a>'
                $(a)[0].click()
            } else if(layEvent === 'resetPwd'){
                showDialog(data)
            }
        });

        // 导入
        upload.render({
            elem: '#impBtn'
            ,url: '/ssms/sysUser/import'
            ,accept: 'file' //普通文件
            ,exts: 'xls|xlsx' //只允许上传excel文件
            ,done: function(res, index, upload){
                if(res.code == 200){
                    layer.open({
                        area: ['500px', '300px'],
                        title: '结果',
                        content: (res.msg)
                    });
                }else{
                    layer.msg(res.msg, {icon: 5, time: 2000})
                }
                reloadTable()
            }
        });

        function resetPwd(data) {
            if(data.password != data.password2){
                layer.msg('密码不一致',{icon:7})
                return;
            }

            $.post('/ssms/sysUser/update',data,function (res) {
                if (res.code == 200){
                    layer.msg('更新成功',{icon:6})
                    if (layerIdx) layer.close(layerIdx);
                }
            })
        }

        function showDialog(stu) {
            layerIdx = layer.open({
                type: 1,
                area: ['400px', '250px'],
                title: '重置密码',
                btn: ['提交'],
                content: $('#dialogHtml').html(),
                success:function(){
                  form.val('dialog-form',{id: stu.id})  // 设置表单的id属性值
                },
                yes: function () {
                    // 弹窗的确定按钮监听
                    $('#dialogBtn').click();
                }
            });
        }

        // 删除
        function remove(data) {
            $.post('/ssms/sysUser/delete/stu',{id: data.id},function (res) {
                if (res.code == 200) {
                    reloadTable();
                    layer.msg('删除成功', {icon: 6, time: 1000})
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }


        // 初始化表格
        function initTable() {
            table.render({
                elem: '#sysUser'
                , url: '/ssms/sysUser/stuList'
                , cols: [[
                    {type: 'numbers', width: 80}
                    , {field: 'code',width: 120, title: '学号'}
                    , {field: 'username',width: 120, title: '姓名'}
                    , {field: 'subjectName', title: '专业'}
                    , {field: 'clazzName',width: 150, title: '班级'}
                    , {title: '操作', toolbar: '#toolbar', width: 220}
                ]]
                , page: true
            });
        }

        // 表格搜索
        function search(fieldObj) {
            console.log(fieldObj)
            table.reload('sysUser', {
                url: '/ssms/sysUser/stuList'
                , where: fieldObj
                , page: {
                    curr: 1
                }
            });
        }
        // 重新加载
        function reloadTable() {
            table.reload('sysUser', {
                url: '/ssms/sysUser/stuList',
            });
        }

        window.exportScore = function (target) {
            window.location.href = '/ssms/sysUser/export?stuId='+$(target).attr('data-stuid')
            $('#pop').css('display','none')
        }

        window.cancel = function (target) {
            $('#pop').css('display','none')
        }
    });
</script>
</body>
</html>